<template>
    <div class="panel">
        <div class="title">
            <span class="title_left">这是今年第{{ dayOfYear }}天,第{{ weekOfYear }}周,今年还剩余{{ remainingDays
            }}天{{ remainingWeeks }}周!</span>
            <span>如果说爱是谎言,那么一定是人类最温柔的发明。 From:-汤上瑞穗《不哭不哭,痛痛飞走吧》</span>
        </div>
        <div class="content">
            <div v-for="(item, index) in items" :key="index" class="content_plan">
                <div class="title">{{ item.date }} ({{ item.day }} )</div>
                <div class="textarea-wrapper">
                    <textarea placeholder="点击输入,自动保存..." v-model="item.value" :style="{ background: item.color }"
                        @change="handleTextareaChange(item)"></textarea>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { planSave, planList, myPlanList, aphorism, } from "@/api/apis/myJob";
export default {

    data() {
        return {
            valuePlan: '',
            items: [
                { value: '', color: '#f36b6b', day: '星期一' },
                { value: '', color: '#fba834', day: '星期二' },
                { value: '', color: '#f2f089', day: '星期三' },
                { value: '', color: '#4ed99c', day: '星期四' },
                { value: '', color: '#929aab', day: '星期五' },
                { value: '', color: '#bad4f9', day: '星期六' },
                { value: '', color: '#be9fe1', day: '星期日' },
                // ...
            ],
            dayOfYear: '',
            weekOfYear: '',
            remainingDays: '',
            remainingWeeks: '',
            startDate: '',
            endDate: '',
            pageModel: {//分页
                limit: 20,
                page: 1
            },
        };
    },
    created() {
        this.init()
        this.myPlanList()
        // this.aphorism()

    },
    mounted() {
    },
    filters: {
        getDate(value) {
            if (!value) {
                return ''
            }
            return value.split('T')[0]
        },
    },

    methods: {
        init() {
            const today = new Date();
            const firstDayOfYear = new Date(today.getFullYear(), 0, 1);
            const dayOfYear = Math.ceil((today - firstDayOfYear) / (24 * 60 * 60 * 1000)) + 1;
            const weekOfYear = Math.ceil(dayOfYear / 7);
            const remainingDays = 365 - dayOfYear;
            const remainingWeeks = Math.ceil(remainingDays / 7);
            this.dayOfYear = dayOfYear
            this.weekOfYear = weekOfYear
            this.remainingDays = remainingDays
            this.remainingWeeks = remainingWeeks

            const currentDayOfWeek = today.getDay();
            const daysOffset = currentDayOfWeek - 1;
            const firstDayOfWeek = new Date(today.getTime() - daysOffset * 24 * 60 * 60 * 1000);
            for (let i = 0; i < 7; i++) {
                const date = new Date(firstDayOfWeek.getTime() + i * 24 * 60 * 60 * 1000);
                const formattedDate = this.formatDate(date); // 格式化日期为 "yyyy-MM-dd"
                this.items[i].date = formattedDate;
            }
            // 输出本周的日期
        },
        formatDate(value, type) {
            // 计算日期相关值
            let time = typeof value == 'number' ? new Date(value) : value;
            let Y = time.getFullYear();
            let M = time.getMonth() + 1;
            let D = time.getDate();
            // 如果传递了type的话
            if (type == undefined) {
                return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D);
            }
        },
        //所有计划列表
        async planList() {
            // this.tabLoading = true;
            let params = {
                ...this.pageModel,
                Sequence: "descending",
                SequenceName: "planDate",
            }
            const res = await planList(params);
            if (res.code == 1) {
                // this.tableData = res.data[1];
                this.items.forEach(item => {
                    res.data[1].forEach(el => {
                        let time = el.planDate.split('T')[0]
                        if (item.date == time) {
                            // console.log(el);
                            item.value = el.planContent
                        }
                    })
                })
            }
        },
        //我的计划列表
        async myPlanList() {
            // this.tabLoading = true;
            let params = {
                ...this.pageModel,
                Sequence: "descending",
                SequenceName: "planDate",
                startDate: this.items[0].date, //开始时间（我的计划看板默认本周周一）
                endDate: this.items[6].date //结束时间（我的计划看板默认本周周日）
            }
            const res = await myPlanList(params);
            if (res.code == 1) {
                this.tableData = res.data[1];
                this.items.forEach(item => {
                    res.data[1].forEach(el => {
                        let time = el.planDate.split('T')[0]
                        if (item.date == time) {
                            item.value = el.planContent
                        }
                    })
                })
                // console.log(res);
            }

        },
        async handleTextareaChange(item) {
            let data = {
                dataMain: {
                    planDate: item.date,
                    planContent: item.value
                }
            }
            let res = await planSave(data)

        },
        // async aphorism() {
        //     let data = {
        //         key: "96dd6f012e1dd6c96e311fa4830386a7",
        //         typeid: 7,
        //         num: 1,
        //     }

        //     let res = await aphorism(data)
        //     console.log(res);
        // }
    },
};
</script>

<style lang="scss" scoped>
.panel {
    padding: 30px 55px;
    width: 100%;
    height: 100%;

    .title {
        font-family: PingFangSC;
        height: 40px;

        .title_left {
            width: 517px;
            height: 33px;
            font-size: 24px;
            font-weight: 600;
            color: #000000;
            line-height: 33px;
            margin-right: 50px;
        }

        span {
            width: 571px;
            height: 20px;
            font-size: 14px;
            color: #1478F5;
            line-height: 20px;
        }
    }

    .content {
        width: 100%;
        height: calc(100% - 40px);
        display: flex;
        flex-wrap: wrap;
        text-align: center;
        align-content: flex-start;

        .content_plan {
            width: 23%;
            height: 300px;
            margin: 10px 10px;
            background: #FFFFFF;
            box-shadow: 0px 2px 8px 4px #F8F8F8;
            border-radius: 8px;
            border: 1px solid #E0E2E6;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;

            .textarea-wrapper {
                // height: calc(100% - 40px);
                height: 250px;
                width: 100%;
            }

            .textarea-wrapper textarea {
                width: 100%;
                height: 100%;
                resize: none;
                overflow: hidden;
                padding: 10px;
                box-sizing: border-box;
                border: none;
            }

            .textarea-wrapper textarea:focus {
                // outline: none;
            }

            .textarea-wrapper textarea::placeholder {
                color: #595757f3;
                font-size: 16px;
            }

            .title {
                width: 100%;
                height: 47px;
                line-height: 47px;
                background: #ECECEC;
                border-radius: 7px;
                color: #666666;
                font-size: 18px;
            }
        }
    }

}
</style>
